<template>
    <div class="padding20">
        <el-form :model="mFormData" :rules="mRules" ref="mFormData"
                 label-width="180px" style="margin-left: 30px;margin-right: 60px;">
            <el-row>
                <el-col :span="12">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>账号信息</span>
                            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                        </div>
                        <div>
                            <el-form-item label="昵称" prop="name" :show-message="true">
                                <el-input v-model="mFormData.name" placeholder="暂无数据"/>
                            </el-form-item>
                            <el-form-item label="账号" prop="account">
                                <el-input v-model="mFormData.account" placeholder="暂无数据"/>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input v-model="mFormData.password" placeholder="暂无数据"/>
                            </el-form-item>
                        </div>
                    </el-card>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>其他信息</span>
                            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                        </div>
                        <div>
                            <el-form-item label="电话" prop="phone">
                                <el-input v-model="mFormData.phone" placeholder="暂无数据"/>
                            </el-form-item>
                            <el-form-item label="座机" prop="telephone">
                                <el-input v-model="mFormData.telephone" placeholder="暂无数据"/>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="mFormData.email" placeholder="暂无数据"/>
                            </el-form-item>
                            <el-form-item label="身份证号" prop="idCard">
                                <el-input v-model="mFormData.idCard" placeholder="暂无数据"/>
                            </el-form-item>
                            <el-form-item label="家庭住址" prop="address">
                                <el-input v-model="mFormData.address" placeholder="暂无数据"/>
                            </el-form-item>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>角色信息</span>
                            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                        </div>
                        <div>

                            <div class="mi-edit-el-transfer">
                                <el-transfer
                                        filterable
                                        style="text-align: left; display: inline-block"
                                        v-model="transfer.value"
                                        :data="transfer.data"
                                        :left-default-checked=transfer.leftDefaultChecked
                                        :right-default-checked=transfer.rightDefaultChecked
                                        :titles=transfer.titles
                                        :button-texts=transfer.buttonTexts
                                        :props=transfer.props
                                        :format=transfer.format
                                        @change="transfer.handleChange">
                                    <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
                                    <!--                <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>-->
                                    <!--                <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>-->
                                </el-transfer>
                                <el-button @click="$K.back('/system/user/list')" size="medium">返 回</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <el-form-item>
                <el-button @click="$K.back('/system/user/list')" size="medium">返 回</el-button>
                <el-button type="primary" plain @click="startUpdate()" size="medium">确 定</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {API} from "@/aconst/API";
    import BaseVue from "@/utils/BaseVue";
    import {errorMsg, successMsg} from "@/utils/message";
    import {ElForm} from "element-ui/types/form";
    import $http from "@/http";
    import {rule} from "@/utils/Rule";

    @Component({
        name: 'UserInsert',
        components: {},
    })
    export default class UserInsert extends BaseVue {
        transfer: any = {
            props: {
                key: 'key',
                label: 'label'
            },
            format: {
                noChecked: '${total}',
                hasChecked: '${checked}/${total}'
            },
            leftDefaultChecked: [2, 3],
            rightDefaultChecked: [1],
            titles: ['全部角色', '当前角色'],
            // buttonTexts: ['删除', '添加'],
            data: this.generateData(),
            value: [],
            handleChange(value: any, direction: any, movedKeys: any) {
                console.log(value, direction, movedKeys);
            }
        };


        mFormData: any = {};
        mRules = {
            name: [rule.notNullBlur()],
        };

        generateData() {
            const data = [];
            for (let i = 1; i <= 15; i++) {
                data.push({
                    key: i,
                    label: `备选项 ${i}`,
                    disabled: i % 4 === 0
                });
            }
            return data;
        };

        get id() {
            return this.$route.query.id;
        }

        //初始化
        async mounted() {

        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }

        //执行修改操作
        insert() {
            (this.$refs.mFormData as ElForm).validate((valid: boolean) => {
                if (valid) {
                    $http.post(API.adminAppUserUpdate, this.mFormData)
                        .then((res: any) => {
                            if (res.success) {
                                successMsg("操作成功");
                            }
                        });
                } else {
                    errorMsg("表单内容填写错误，请检查！")
                }
            });
        }

        //文件上传地址
        uploadUrl = API.adminUploadUrl;
    }


</script>

<style scoped lang="scss">
    .mi-edit-el-transfer {

        .el-transfer-panel__list.is-filterable {
            height: 250px;
        }

        .el-transfer-panel__body {
            height: 330px;
        }

    }
</style>
